<template>
  <div>
    <div id="index-main" >
    <div class="top-container">
      <span class="sn">3D数字资产交易平台</span>
      <!-- <div class="search">
        <el-input type="text" suffix-icon="iconfont el-icon-search"></el-input>
      </div> -->
    </div>
    <div class="index-top">
      <el-carousel :interval="4000" type="card">
        <el-carousel-item v-for="good in goods" :key="good.goodid">
          <!-- <img src="../../common/picture/CT.jpg" /> -->
          <img :src="good.coverurl" alt="轮播图片" class="carousel_img_size" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="index-buttom">
      <div class="div_">
        <div
          class="div_n"
          v-for="type in types"
          :key="type.typeid"
          @click="gotoquery(type)"
        >
          <img :src="type.coverurl" alt="类别代表图片" class="list_img_size" />
          <span class="floattext">{{ type.typename }}</span>
          <span class="floattext_1">{{ formatStatus(type.typename) }}</span>
        </div>
      </div>
      <!-- <ul class="class_ul" id="typelist">
        <li class="line1">
          <a href="_blank" class="imgclass">
            <img
              class="img2"
              src="~images/1.jpg"
              alt="this.tableData.sectype[]"
            />
          </a>
        </li>
        <li class="line2">
          <a href="_blank" class="imgclass">
            <img class="img2" src="~images/1.jpg" alt="" />
          </a>
        </li>
        <li class="line2">
          <a href="_blank" class="imgclass">
            <img class="img2" src="~images/1.jpg" alt="" />
          </a>
        </li>
        <br />
        <li class="line1">
          <a href="_blank" class="imgclass">
            <img class="img2" src="~images/1.jpg" alt="" />
          </a>
        </li>
        <li class="line2">
          <a href="_blank" class="imgclass">
            <img class="img2" src="~images/1.jpg" alt="" />
          </a>
        </li>
        <li class="line2">
          <a href="_blank" class="imgclass">
            <img class="img2" src="~images/1.jpg" alt="" />
          </a>
        </li>
        <li class="line1">
          <a href="_blank" class="imgclass">
            <img class="img2" src="~images/1.jpg" alt="" />
          </a>
        </li>
        <li class="line2">
          <a href="_blank" class="imgclass">
            <img class="img2" src="~images/1.jpg" alt="" />
          </a>
        </li>
        <li class="line2">
          <a href="_blank" class="imgclass">
            <img class="img2" src="~images/1.jpg" alt="" />
          </a>
        </li>
      </ul> -->
    </div>
    </div>
    
  </div>
</template>

<script>
import {
  getCarousel,
  getList,
  getTypeidData,
  // getQuery,
} from "crm/mainpage/mainpage.js";
import { EventBus } from "bus/mybus.js";
export default {
  data() {
    return {
      // passForm: { oldPassword: "", newPassword: "" },
      // show:true,
      dialogVisible: false,
      // tableData: [],
      // maintype: [],
      // sectype: [
      //   {
      //     picurl: "",
      //     picurlname: "",
      //     name: "",
      //     typeid: "",
      //   },
      // ],
      // total: 0,
      // total_Carousel: 0,
      // picturl: [],
      // goodid: [],
      // picname: [],
      goods: [], //存放轮播图
      types: [], //存放列表商品数据
    };
  },
  // components:{
  //   secondsmenu
  // },
  props: ["collapse"],
  created() {
    this.getCarouselDatas();
    this.getListDatas();
    // this.getTypeDatas();
  },
  methods: {
    //页面跳转（类别查询）
    gotoquery(type) {
      this.$router.push({
        name: "/admin/goods/classes",
        params: {
          typeid: type.typeid,
          typename: type.name,
        },
      });
      // this.show=!this.show;
      // this.type.typeid=type.typeid;
      // this.type.name=type.name;
      // console.log(this.type);
    },
    //类型对应
    formatStatus(row) {
      switch (row) {
        case "环境-3D":
          return "Environment-3D";
        case "艺术品-3D":
          return "Artwork-3D";
        case "植物-3D":
          return "Plants-3D";
        case "物品-3D":
          return "Artical-3D";
        case "粒子动画":
          return "Particle";
        case "艺术品-2D":
          return "Artwork-2D";
        case "视频":
          return "Video";
        case "材料":
          return "Meterial";
        case "音乐":
          return "Music";
      }
    },
    //获取主页上面轮播图图片 主页上半部分导航栏
    getCarouselDatas() {
      const payload = {};
      getCarousel(payload)
        .then((res) => {
          if (res.status == "OK") {
            this.goods = res.data.goods;
            // this.total_Carousel = this.goods.length;
            // for (let i = 0; i < this.total_Carousel; i++) {
            //   this.picturl[i] = this.goods[i].picturl;
            //   this.goodid[i] = this.goods[i].goodid;
            //   this.picname[i] = this.goods[i].picname;
            // }
            // console.log("打印goods");
            console.log(this.goods);
          } else {
            alert("导航栏加载失败");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },
    //获取主页下面的商品 主页下半部分类型展示栏
    getListDatas() {
      const payload = {};
      getList(payload)
        .then((res) => {
          if (res.status == "OK") {
            this.types = res.data.types;
            // console.log("打印types");
            // console.log(this.types);
          } else {
            alert("类型展示栏加载失败");
          }
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },

    //获取类型
    // getTypeDatas() {
    //   const payload = {};
    //   getTypeData(payload)
    //     .then((res) => {
    //       if (res.status == "OK") {
    //         this.tableData = res.data;
    //         this.total = this.tableData.types.length;
    //         console.log(this.total);
    //         for (let i = 0; i < this.total; i++) {
    //           this.maintype[i] = this.tableData.types[i].maintype;
    //           this.sectype[i] = this.tableData.types[i].sectype;
    //         }
    //         console.log("打印maintype");
    //         console.log(this.maintype);
    //         console.log("打印sectype");
    //         console.log(this.sectype);
    //       } else {
    //         alert("类型加载失败");
    //       }
    //     })
    //     .catch((err) => {
    //       EventBus.$emit("closeloading");
    //     });
    // },

    //点击主页下半部分展示栏进入商品查询
    // getGoodQuery() {
    //   const payload = {};
    //   getQuery(payload)
    //     .then((res) => {
    //       if (res.status == "OK") {
    //         this.types = res.data;
    //         console.log("打印types_1");
    //         console.log(this.types);
    //       } else {
    //         alert("类型加载失败");
    //       }
    //     })
    //     .catch((err) => {
    //       EventBus.$emit("closeloading");
    //     });
    // },

    //  leftCarRealTimeInformation = function(){
    //     $.ajax({
    //       url: "http://rap2api.taobao.org/app/mock/297978/typeQuery",
    //       type: "get", //获取数据方式:post/get
    //       async: false, //加载方式默认异步,true为同步
    //       dataType: "json", //数据格式
    //       success: function (data) {
    //         var carNewsList = "";
    //         $.each(data, function (i, item) {
    //           //遍历ul中的li
    //           carNewsList +=
    //             "<li  style='font-size:14px;color:#5d5d5d;'>" +
    //             item.columnName +
    //             "</li>";
    //         });
    //         $("#typelist").html(carNewsList); //数据在<ul id="leftCarInformationList"></ul>里面显示
    //       },
    //       error: function (obj) {
    //         alert("return error:" + obj);
    //       },
    //     });
    //   },
  },
};
</script>
<style scoped>
.index-main {
  height: 100%;
  width: 100%;
  display: flex;
}
.top-container {
  margin-top: 0.5%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.sn {
  margin-left: 2%;
  font-size: 30px;
  font-style: italic;
  font-weight: 900;
  color: #909399;
}
.search {
  margin-top: 0.5%;
}
/deep/.el-input__inner {
  background-color: #2f2f2f;
  border: 5px solid #292929;
  border-radius: 20px;
}
.el-input__icon {
  color: #3a3a3a;
}
.icon_style {
  color: #4c4c4c;
}
.index-top {
  width: 80%;
  height: 390px;
  margin: auto;
}
/deep/ .el-carousel__container {
  position: relative;
  height: 375px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.carousel_img_size {
  width: 100%;
  height: 100%;
}
.index-buttom {
  width: 100%;
  height: 100%;
  margin: auto;
}
.div_ {
  width: 90%;
  overflow: hidden;
  padding: 10px 0px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 5%;
  margin-right: 0px;
  margin-top: 10px;
}
.div_n {
  position: relative;
  width: calc(30% - 30px);
  height: 250px;
  float: left;
  margin-left: 50px;
  margin-bottom: 20px;
}
.list_img_size {
  /* width: 350px;
  height: 250px; */
  width: 100%;
  height: 100%;
}
.class_ul {
  margin-top: 30px;
  margin-left: 5%;
}
.line1 {
  width: 30%;
  height: 300px;
  list-style-type: none;
  float: left;
  /* height:200px; */
  margin-bottom: 8px;
  background: rgb(68, 67, 67);
}
.line2 {
  width: 30%;
  height: 300px;
  margin-left: 20px;
  float: left;
  list-style-type: none;
  /* height:300px; */
  margin-bottom: 8px;
  background: rgb(68, 67, 67);
}
.imgclass {
  width: 30%;
  height: 120px;
}
.img2 {
  width: 30%;
  height: 120px;
  margin-bottom: 30px;
  margin-left: 0.3px;
  border-radius: 2%;
}
/* 悬浮的文字 */
.floattext {
  position: absolute;
  bottom: 50px;
  right: 16px;
  color: #a2662f;
  font-family: "Youshebiaotihei";
  font-size: 40px;
}
.floattext_1 {
  position: absolute;
  bottom: 10px;
  right: 16px;
  color: #ead3c2;
  font-family: "Youshebiaotihei";
  font-size: 25px;
}
@media screen and (min-width:960px) and (max-width:1500px){
  /* 悬浮的文字 */
  .floattext {
    position: absolute;
    bottom: 50px;
    right: 16px;
    color: #a2662f;
    font-family: "Youshebiaotihei";
    font-size: 30px;
  }
  .floattext_1 {
    position: absolute;
    bottom: 10px;
    right: 16px;
    color: #ead3c2;
    font-family: "Youshebiaotihei";
    font-size: 20px;
  }
}
</style>